<template>
  <div class="chat-address-book">
    <el-tree
      class="chat-tree"
      ref="treeRef"
      :data="contactList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      default-expand-all
      empty-text="暂无联系人"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }" @dblclick="onDblclick(data)">
        <span class="node-info" :class="{ 'is-leaf': node.isLeaf }">
          <i
            v-if="!node.isLeaf"
            class="tree-icon"
            :class="{
              'expanded': node.expanded,
              'is-root': node.level === 1,
              'iconfont icon-wenjianjia_close': node.level === 1 && !node.expanded,
              'iconfont icon-wenjianjia_open': node.level === 1 && node.expanded,
              'iconfont icon-mingdan': node.level > 1
            }"
          ></i>
          <i v-else class="tree-icon iconfont icon-renyuan1"></i>
          <span>{{ node.label }}</span>
        </span>

        <span class="action">
          <el-button type="text" icon="el-icon-chat-dot-square" size="mini" @click="onChat(data)">发起对话</el-button>
        </span>
      </span>
    </el-tree>

    <chat-panel ref="chatPanelRef"></chat-panel>
  </div>
</template>

<script>
import chatPanel from './chat-panel';

export default {
  name: 'chat-address-book',
  components: { chatPanel },
  props: {
    filterText: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      contactList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    },
  },
  mounted() {
    this.contactList = [
      {
        id: '101',
        label: '研发部',
        children: [
          {
            id: '10101',
            label: '前端',
            children: [
              { id: '10101001', label: 'HTML' },
              { id: '10101002', label: 'CSS' },
              { id: '10101003', label: 'JavaScript' },
              { id: '10101004', label: 'Vue' },
            ],
          },
          {
            id: '10102',
            label: 'Java',
            children: [
              { id: '10102001', label: '大数据' },
              { id: '10102002', label: ' 小明1' },
              { id: '10102003', label: ' 小明2' },
              { id: '10102004', label: ' 小明3' },
              { id: '10102005', label: ' 小明4' },
              { id: '10102006', label: ' 小明5' },
              { id: '10102007', label: ' 小明6' },
              { id: '10102008', label: ' 小明7' },
              { id: '10102009', label: ' 小明8' },
            ],
          },
          {
            id: '10103',
            label: '产品',
            children: [
              { id: '10103001', label: 'PM' },
              { id: '10103002', label: '小曾1' },
              { id: '10103003', label: '小曾2' },
              { id: '10103004', label: '小曾3' },
              { id: '10103005', label: '小曾4' },
              { id: '10103006', label: '小曾5' },
              { id: '10103007', label: '小曾6' },
            ],
          },
        ],
      },
      {
        id: '102',
        label: '测试部',
        children: [
          { id: '102001', label: '测001' },
          { id: '102002', label: '测002' },
          { id: '102003', label: '测003' },
        ],
      },
    ];
  },
  methods: {
    // handleIconClick(node, data) {
    //   node.expanded = !node.expanded;
    // },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    /**
     * 双击直接弹出聊天面板
     */
    onDblclick(record) {
      this.$refs.chatPanelRef.open(JSON.parse(JSON.stringify(record)));
    },

    /**
     * 单击聊天按钮弹出聊天面板
     * @param record
     */
    onChat(record) {
      this.$refs.chatPanelRef.open(JSON.parse(JSON.stringify(record)));
    },
  },
};
</script>

<style lang="scss" scoped>
.chat-address-book {
  width: 100%;
  height: 100%;
  padding-right: 12px;
}

.chat-tree {
  background: transparent;
  color: #fff;

  //::v-deep .el-tree-node__expand-icon {
  //  display: none;
  //}

  ::v-deep .el-tree-node {
    .el-tree-node__content {
      height: 40px;
      cursor: default;
      background-color: transparent;

      &:hover {
        background: rgba(0, 155, 236, 0.25);
      }
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      height: 100%;
      position: relative;

      .node-info {
        .tree-icon {
          margin-right: 6px;
          //cursor: pointer;

          &.is-root {
            color: #20FCFF;
          }
        }

        &.is-leaf .tree-icon {
          cursor: default;
        }
      }

      .action {
        display: none;
        padding-right: 12px;
      }

      &:focus, &:hover {

        .action {
          display: inline;
        }
      }
    }

    //&:focus > .el-tree-node__content {
    //  background-color: transparent;
    //}
  }
}
</style>
